<!--
    @Title: LeaferRuler
    @Author  dudalei
    @Package 
    @Date  2024/10/14 15:50
    @description: 标尺线插件


-->
<script setup lang="ts">
import { TooltipPlugin } from 'leafer-x-tooltip'
// import { TooltipPlugin } from 'leafer-x-tooltip-canvas'
// 导入画布对象
const leaferApp = inject(LeaferInjectKey)

let tooltip: TooltipPlugin

watchEffect(() => {
  if (!leaferApp || !leaferApp.value) {
    return
  }
  // 创建插件实例
  new TooltipPlugin(leaferApp.value, {
    getContent(node) {
      const dom = `<ul style="list-style: none; margin: 0; padding: 0">
      <li>节点类型：${node.tag}</li>
      <li>宽度：${node.width}</li>
      <li>高度：${node.height}</li>
    </ul>
    `
      return dom
    },
  })
})

onBeforeUnmount(() => {
  tooltip?.destroy()
})
</script>

<template>
  <div></div>
</template>

<style lang="scss">
.leafer-x-tooltip {
  margin-left: 20px;
  // 提示框暂时不接收事件
  pointer-events: none;
}
</style>
